<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Sample</title>
<meta name="viewport"
            content="width=device-width, initial-scale=1.0">
<meta name="HandheldFriendly" content="true">
</head>
<body>
<canvas id="clock" width="150" height="150"></canvas>
<script>
function clock(){
   var cxt = document.getElementById('clock').getContext('2d');
   cxt.save();                        // 保存状态
   cxt.clearRect(0, 0, 150, 150); // 清理画布
   cxt.translate(75, 75);           // 以(75, 75)为原点
   cxt.scale(0.5, 0.5);             // 缩放
   cxt.rotate(-Math.PI/2);          // 逆转90度
   // =========================================================== 
   // [01]画表盘
   cxt.beginPath();
   cxt.lineWidth = 30;
   var gld = cxt.createLinearGradient(0,0,50,75);
   gld.addColorStop(0,"#E0E3EC");
   gld.addColorStop(1,"#9AA0A0");
   cxt.strokeStyle = gld;
   var grd = cxt.createRadialGradient(0,0,0,0,0,150);
   grd.addColorStop(0,"#FAD877");
   grd.addColorStop(1,"#F6882F");
   cxt.fillStyle = grd;
   cxt.arc(0,0,135,0,Math.PI*2,true);
   cxt.stroke();
   cxt.fill();
   // ===========================================================
   // 全局设置，以后的线条都使用该设置
   cxt.strokeStyle = "#FFFEF5";   
   cxt.lineCap = "square";
   // ===========================================================
   // [02]画12个时刻刻度
   cxt.save(); // 将状态保存起来
   cxt.lineWidth = 8; // 设置线条粗细
   cxt.beginPath();
   for (var i=0;i<12;i++){
      // 以当前原点为圆心旋转30°
      cxt.rotate(Math.PI/6);
      // 以圆心外100像素处为起点，120像素处为终点画线
      cxt.moveTo(100,0);
      cxt.lineTo(120,0);
      cxt.stroke(); // 画出这条路径线条
   }
   // 恢复状态，将取出的状态作为当前状态
   cxt.restore();
   // ===========================================================
   // [03]画60个分钟刻度
   cxt.save();
   cxt.lineWidth = 5;
   for (i=0;i<60;i++){
      // 因为时针就是每五分钟的点了，所以跳过不画了
      if (i%5!=0) {
        cxt.beginPath();
        cxt.moveTo(117,0);
        cxt.lineTo(120,0);
        cxt.stroke();
      }
      // 旋转6°
      cxt.rotate(Math.PI/30);
   }
   cxt.restore();
   // =========================================================== 
   var now = new Date();
   var sec = now.getSeconds();// 获取当前秒
   var min = now.getMinutes();// 获取当前分
   var hr  = now.getHours();// 获取当前时
   // 判断是否是24小时计时法，是则减12
   hr = hr>=12 ? hr-12 : hr;
   // ===========================================================
   // [04]画时针
   cxt.save();
   // 时针转向当前位置
   cxt.rotate(hr*(Math.PI/6) + (Math.PI/360)*min +
                (Math.PI/21600)*sec );
   // 设置时针宽度
   cxt.lineWidth = 10;
   cxt.beginPath();
   cxt.moveTo(-20,0); // 反向延长20个像素
   cxt.lineTo(70,0);
   cxt.stroke();
   cxt.restore();
   // =========================================================== 
   // [05]画分针
   cxt.save();
   cxt.rotate((Math.PI/30)*min + (Math.PI/1800)*sec);
   cxt.lineWidth = 8;
   cxt.beginPath();
   cxt.moveTo(-28,0);
   cxt.lineTo(90,0);
   cxt.stroke();
   cxt.restore();
   // =========================================================== 
   // [06]画秒针
   cxt.save();
   cxt.rotate(sec * Math.PI/30);
   cxt.lineWidth = 6;
   cxt.beginPath();
   cxt.moveTo(-30,0);
   cxt.lineTo(120,0);
   cxt.stroke();
   cxt.restore();
   // =========================================================== 
   // [07]画中心点
   cxt.beginPath();
   cxt.fillStyle = grd;
   cxt.arc(0,0,10,0,Math.PI*2,true);
   cxt.fill();
   
   // 恢复状态
   cxt.restore();
}
function initClock(){
   clock();
   setInterval(clock,1000);
}
initClock();
</script>
</body>
</html>
